<template>
  <div class='info-window'>
      <div>
        <p class="info-title">信息详情</p>
        <p class="close-btn" @click="close"></p>
        <ul class="info-content">
          <li>学校：{{detailData.properties.name}}</li>
          <li>所在详细位置：</li>
        </ul>
      </div>
  </div>
</template>

<script>
import Bus from '@/components/Bus'

export default {
  name: '',
  props: {
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  components: {

  },
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {

  },
  watch: {

  },
  methods: {
    close () {
      this.$emit('close')
      Bus.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.info-window{
    >div{
      position: absolute;
      left: 35%;
      top: 0;
      margin: 1.64rem auto;
      color: white;
      width: 5.5rem;
      height: 3.54rem;
      box-sizing: border-box;
      padding: .12rem .18rem;
      background: url('../../asset/img/detailBox.png') no-repeat center center;
      background-size: cover;
      .info-title{
        box-sizing: border-box;
        padding-top: .58rem;
        text-align: center;
        font-weight: bold;
        font-size: .28rem;
        color: rgba(49, 150, 250, 1);
      }
      .info-content{
        color: white;
        font-size: .14rem;
      }
      .close-btn{
        position: absolute;
        right: -.12rem;
        top: -.12rem;
        width: .3rem;
        height: .3rem;
        cursor: pointer;
        background: url('../../asset/img/close.png') no-repeat center center;
        background-size: cover;
      }
    }
  }
</style>
